<script lang="ts" setup>import { useCheckbox } from '@/common/use/checkbox';
import { ICheckboxTransmit, PrimaryKey, TShape } from '@/types';
import { computed, inject, reactive, ref } from 'vue';
// typescript

interface IProps {
  /**
   * 主键 唯一标识
   */
  value: PrimaryKey
  /**
   * 形状
   */
  shape?: TShape
  /**
   * 选中颜色
   */
  checkedColor?: string
  /**
   * 图标大小
   */
  iconSize?: number
  /**
   * 是否禁用
   */
  disabled?: boolean
  /**
   * 禁用文本点击
   * 设置 label-disabled 属性后，点击图标以外的内容不会触发复选框切换。
   */
  labelDisabled?: boolean,
  /**
   * 独立使用模式
   * 暂时先用这个属性凑合 有空 使用递归查找父级方式确认是否独立使用
   */
  independent?: boolean
  /**
   * 独立使用时生效
   */
  checked?: boolean
}

interface IEmits {
  (e: "update:checked", value: boolean): void
  (e: "change", value: boolean): void
}
const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
  shape: "circle",
  checkedColor: "#007aff",
  iconSize: 20,
  disabled: false,
  labelDisabled: false,
  independent: false
});
const { getKey } = useCheckbox();
// 注入父组件数据
const parentProvide = ref<ICheckboxTransmit>(!props.independent ? inject<any>(getKey()) : undefined);
const state = reactive({
  checked: props.checked
});
const isCheck = computed(() => {
  if (!parentProvide.value) {
    // 独立使用模式
    return state.checked;
  } else {
    return parentProvide.value.checkbox.includes(props.value);
  }
});

// 选中、取消
const checked = () => {
  // 禁用状态
  if (props.disabled) {
    return
  }

  // 独立使用模式
  if (!parentProvide.value) {
    state.checked = !state.checked;
    emits("update:checked", state.checked);
    emits("change", state.checked);
    return
  }

  // 单选框模式
  if (parentProvide.value.radio) {
    parentProvide.value.checkbox = [props.value];
    return
  }

  const index = parentProvide.value.checkbox.findIndex(x => x == props.value);

  if (index == -1) {
    if (parentProvide.value.max > 0 && parentProvide.value.max <= parentProvide.value.checkbox.length) {
      return
    }
    parentProvide.value.checkbox.push(props.value);
  } else {
    parentProvide.value.checkbox.splice(index, 1);
  }
}

// 全部区域 选中、取消
const onCheck = () => {
  if (props.labelDisabled) {
    return
  }
  checked();
}

// icon 选中、取消
const onIconCheck = () => {
  if (!props.labelDisabled) {
    return
  }
  checked();
}
</script>

<!-- 复选框 -->
<template>
  <view class="w-components-container w-checkbox" @click="onCheck">
    <view @click="onIconCheck" class="icon-view" :class="{ checked: isCheck, circle: shape == 'circle', disabled: disabled }">
      <view class="checkbox" :style="{
        backgroundColor: isCheck ? checkedColor : '', 
        borderColor: isCheck ? checkedColor : '', 
        width: iconSize + 'px', 
        height: iconSize + 'px'}">
        <view class="icon" v-if="isCheck"></view>
      </view>
    </view>
    <view class="label-view">
      <slot></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-checkbox {
  display: flex;
  align-items: center;
}

.icon-view {
  margin-right: 10px;
  &.disabled {
    .checkbox {
      border-color: #C8C9CC;
      background-color: #EBEDF0;

      .icon {
        border-color: #C8C9CC;
      }
    }
  }
  &.circle {
    .checkbox {
      border-radius: 50%;

      .icon {
        width: 50%;
        height: 20%;
      }
    }
  }
  &.checked {
    .checkbox {
      background-color: $uni-color-primary;
      border-color: $uni-color-primary;
    }
  }
  .checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid $uni-border-color;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .1s;

    .icon {
      width: 60%;
      height: 25%;
      border: 1px solid #fff;
      border-width: 0 0 2px 2px;
      transform: rotate(-45deg);
      vertical-align: baseline;
      margin-top: -3px;
    }
  }
}

.label-view {
  flex: 1;
  margin-top: -3px;
}
</style>